import type { ProColumns } from "@ant-design/pro-components";
import { ProFormGroup, ProFormInstance, ProTable } from "@ant-design/pro-components";

import {
  unPushedList,
  merchantList, dataPush, anomalyCount, anomalyUpdate, orderDelete
} from "@/services/bz/api";
import React, { useRef, useState } from "react";
import { useRequest } from "@@/plugin-request/request";
import { Button, Card, message, Popconfirm } from "antd";

export type TableListItem = {
  merchantCode: string;
  agentCode: string;
  orderNo: string;
  status: number;
  syncStatus: number;
};

export default () => {
  const [merchantData, setMerchantData] = useState({});
  const [count, setCount] = useState(0);
  const [loadings, setLoadings] = useState<boolean>(false);
  const [deleteLoadings, setDeleteLoadings] = useState<boolean>(false);

  useRequest(merchantList, {
    onSuccess: (res) => {
      let data = {};
      //将拿到的返回值遍历
      res.list.map(item => {
        //使用接口返回值的id做为 代替原本的0，1
        data[item.merchantCode] = {
          //使用接口返回值中的overdueValue属性作为原本的text:后面的值
          text: item.merchantCode
        };
      });
      setMerchantData(data);
    }
  });
  useRequest(anomalyCount, {
    onSuccess: (res) => {
      setCount(res == null ? 0 : res);
      console.log("==1111=", count);
    }
  });

  const columns: ProColumns<TableListItem>[] = [
    {
      title: "商户名称",
      dataIndex: "merchantCode",
      key: "merchantCode",
      valueEnum: merchantData
    },
    {
      title: "坐席名称",
      dataIndex: "agentCode",
      search: false
    },
    {
      title: "订单数量",
      dataIndex: "counts",
      search: false
    }
  ];
  const ref = useRef<ProFormInstance>();
  return (
    <div>
      <Card style={{ margin: "15px" }}>


          <div style={{ display:"flex",flexDirection:"row",justifyContent:"space-between",width:"100%"}}>
            <div>

              <h4>存在异常订单：{count}</h4>
              <Popconfirm
                title={"重新拉取数据"}
                onConfirm={(e) => {
                  setLoadings(true);
                  anomalyUpdate().then(() => {
                    setCount(0);
                    setLoadings(false);
                    message.success("正在重新拉取数据...");
                  });
                }}
                onCancel={() => {
                }}
              >
                <Button key={"b"} type={"primary"} loading={loadings} onClick={() => {
                }}>
                  重新拉取数据
                </Button>
              </Popconfirm>
            </div>
            <Popconfirm
              style={{marginTop:"20px"}}
              title={"是否删除当前已经还款的数据？"}
              onConfirm={(e) => {
                setDeleteLoadings(true);
                orderDelete().then((res) => {
                  console.log("====",res)
                  setDeleteLoadings(false);
                  message.success(res.data);
                });
              }}
              onCancel={() => {
              }}
            >
              <Button key={"b"} type={"primary"} danger={true} loading={deleteLoadings} onClick={() => {
              }}>
                删除当前已还款数据
              </Button>
            </Popconfirm>
          </div>

      </Card>
      <ProTable<TableListItem>
        actionRef={ref}
        style={{
          margin: "16px"
        }}
        columns={columns}
        request={async (params: any) => {
          console.log("===", params);
          let code = null;
          if (params.merchantCode != undefined) {
            code = params.merchantCode;
          }
          let response = await unPushedList(code);
          console.log(1231, response);
          return { data: response.data == null ? [] : response.data };
        }}
        rowKey="key"
        pagination={{
          showSizeChanger: true
        }}
        search={{
          labelWidth: "auto"
        }}
        options={false}
        headerTitle="未推送订单数据"
        revalidateOnFocus={false}
        toolBarRender={() => [
          <Popconfirm
            title={"将数据推送到催收系统"}
            onConfirm={(e) => {
              dataPush().then(() => {
                message.success("正在推送数据，请勿重复点击");
                ref.current.reload();
              });
            }}
            onCancel={() => {
            }}
          >
            <Button key={"b"} type={"danger"} onClick={() => {
            }}>
              数据推送
            </Button>
          </Popconfirm>
        ]}

      />
    </div>

  );
};
